<template>
  <div class="home-page">
    <div class="welcome-message">
      <h1>欢迎使用惊喜一餐！</h1>
      <p>这里是您的美食指南，为您推荐最美味的餐厅。</p>
    </div>
    <div class="recommended-restaurants">
      <h2>推荐餐厅</h2>
      <div class="restaurant-grid">
        <div v-for="restaurant in restaurants" :key="restaurant.id" class="restaurant-item">
          <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image">
          <div class="restaurant-details">
            <h3>{{ restaurant.name }}</h3>
            <p>评分: {{ restaurant.rating }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [
        {id: 1, name: '餐厅A', rating: 4.5, image: '/images/restaurant1.png'},
        {id: 2, name: '餐厅B', rating: 4.8, image: '/images/restaurant2.png'},
        {id: 3, name: '餐厅C', rating: 4.2, image: '/images/restaurant3.png'},
        {id: 4, name: '餐厅C', rating: 3.5, image: '/images/restaurant4.png'}
      ]
    };
  }
};
</script>

<style scoped>
.home-page {
  padding: 20px;
  text-align: center;
}

.welcome-message {
  margin-bottom: 20px;
}

.recommended-restaurants {
  margin-bottom: 20px;
}

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.restaurant-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.restaurant-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.restaurant-details {
  padding: 10px;
  text-align: left;
}
</style>